<template>
  <div class="ezviz-player-container" v-bind="$attrs" v-on="$listeners">
    <iframe
      v-if="src"
      :id="id + '_iframe_player'"
      :src="src"
      frameborder="0"
      allowfullscreen
      autoplay
      longdesc="请刷新页面"
    ></iframe>
    <div class="empty" v-else></div>
  </div>
</template>

<script>
//萤石云播放
import { getVideoToken } from "@/api/monitor_video.js";
export default {
  name: "playerEzviz",
  props: {
    id: {
      type: [Number, String],
      default: 0,
      required: true,
    },
    appkey: {
      type: String,
      default: "",
    },
    secret: {
      type: String,
      default: "",
    },
    //设备序列号
    deviceSerialNumber: {
      type: String,
      default: "",
    },
    //通道号
    channelNumber: {
      type: String,
      default: "",
    },
    //预置点
    intdata: {
      type: [Number, String],
      default: "",
    },
    //高清/标清
    isHd: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    id: {
      handler(val) {
        if (val != "") {
          this.createPlayer();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      decoderPath:
        "https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com",
      src: "",
      accessToken: "",
      index: "",
    };
  },
  methods: {
    //初始化播放器
    async createPlayer() {
      let {
        appkey,
        secret,
        decoderPath,
        deviceSerialNumber,
        channelNumber,
        isHd,
      } = this;
      let ezuikit = "";
      //判断 高清 / 标清
      if (isHd) {
        ezuikit = channelNumber + ".hd.live";
      } else {
        ezuikit = channelNumber + ".live";
      }
      let token = await this.getVideoToken(appkey, secret);
      this.src = `${decoderPath}/${deviceSerialNumber}/${ezuikit}&autoplay=1&audio=0&templete=0&accessToken=${token}`;
      this.accessToken = token;
    },

    //查询萤石云Token
    getVideoToken(appKey = "", appSecret = "") {
      return new Promise((resolve, reject) => {
        getVideoToken({
          appKey,
          appSecret,
        })
          .then((res) => {
            let { data } = res;
            resolve(data?.accessToken || "");
          })
          .catch((_) => {
            reject("");
          });
      });
    },
  },
  destroyed() {},
};
</script>

<style lang="less" scoped>
.ezviz-player-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #000;
  iframe {
    height: 100%;
    width: 100%;
  }
  .empty {
    height: 100%;
    width: 100%;
  }
}
</style>
